<template>
	<ul class="keyboard">
		<li v-for="key in keyList" track-by="$index" :class="{delete: key === 'Delete', tab: key === 'Tab', capslock: key === 'Caps', enter: key === 'Enter', shift: key === 'Shift', space: key === 'Space', shifted: (key === 'Shift') && hasShifted, capsed: (key === 'Caps') && hasCapsed }" v-text="key" @click="clickKey(key)"></li>
	</ul>
</template>

<script>

export default {
  data() {
    return {
      keyList: [],
				normalKeyList: [],
				shiftedKeyList: [],
				capsedKeyList: [],
				hasShifted: false,
				hasCapsed: false
    }
  },
  props: {
    option: {
      type: Object
    }
  },
  computed: {
    showKeyboard(){
      return this.option.show
    }
  },

  mounted() {
  },
  methods: {
    tabHandle({ value = '' }) {
      if(value.indexOf('tab-num') > -1){
         this.status = 2
         //数字键盘数据
      }else if(value.indexOf('key-delete') > -1){
        this.emitValue('delete')
      }else if(value.indexOf('tab-blank') > -1){
        this.emitValue(' ')
      }else if(value.indexOf('tab-enter') > -1){
        this.emitValue('\n')
      }else if(value.indexOf('tab-point') > -1){
        this.emitValue('.')
      }else if(value.indexOf('tab-symbol') > -1){
        this.status = 3
      }else if(value.indexOf('tab-top') > -1){
        if(this.status === 0){
          this.status = 1
          this.keyList = this.uppercase
        }else{
          this.status = 0
          this.keyList = this.lowercase
        }
      }else{

      }
    },
    clickKey(key) {

        let val=null;
				switch(key) {
					case "Delete":
            val='delete';
						break;

					case "Tab":
						val= "\t";
						break;

					case "Enter":
						val= "\n";
						break;

					case "Space":
						val= " ";
						break;

					case "Caps":
						this.hasCapsed = !this.hasCapsed;
						this.keyList = this.hasCapsed ? this.capsedKeyList : this.normalKeyList;
						break;

					case "Shift":
						this.hasShifted = !this.hasShifted;
						this.keyList = this.hasShifted ? this.shiftedKeyList : this.normalKeyList;
						break;

					default:
						val= key.toString();
						break;

				}
        if(val)
          this.emitValue(val)

		},
    emitValue(key) {
      this.$emit('keyVal', key)
    },

    closeModal(e) {
      if (e.target !== this.option.sourceDom) {
        // this.showKeyboard = false
        this.$emit('close', false)
      }
    }
	},
	created()
	{let normalKeyList = ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Delete',
						'Tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\',
						'Caps', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', "'", 'Enter',
						'Shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', 'Shift', 
						'Space'], 

				shiftedKeyList = ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', 'Delete',
						'Tab', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '{', '}', '|',
						'Caps', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ':', '"', 'Enter',
						'Shift', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '<', '>', '?', 'Shift', 
						'Space'],

				capsedKeyList = ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Delete',
						'Tab', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '[', ']', '\\',
						'Caps', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', "'", 'Enter',
						'Shift', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/', 'Shift', 
						'Space'];

			this.keyList = this.normalKeyList = normalKeyList;
			this.shiftedKeyList = shiftedKeyList;
			this.capsedKeyList = capsedKeyList;},
	ready() {
		console.log(11111);
			
		}
}
</script>
<style lang="less" scoped>
.keyboard {
	width: 1300px;
	margin: 0;
	padding: 0;
	list-style: none;
	user-select: none;

	li {
		float: left;
		margin: 0 5px 5px 0;
		width: 85px;
		height: 85px;
		line-height: 85px;
		text-align: center;
		background: #fff;
		font-size: 30px;
		border: 1px solid #e5e5e5;
		border-radius: 5px;

		&:hover {
			position: relative;
			border-color: gray;
			cursor: pointer;
		}
		&:active {
			top: 1px;
			left: 1px;
		}
	}

	.tab, .delete {
		width: 120px;
	}
	.capslock {
		width: 150px;
	}
	.enter {
		width: 145px;
	}
	.shift {
		width: 192px;
	}
	.space {
		clear: left;
		width: 1290px;
	}
	.shifted {
		position: relative;
		top: 1px;
		left: 1px;
		border-color: #e5e5e5;
		cursor: pointer;
	}
	.capsed {
		position: relative;
		top: 1px;
		left: 1px;
		border-color: #e5e5e5;
		cursor: pointer;
	}
}
</style>
